import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pornhub_app/components/app_bg_view.dart';
import 'package:pornhub_app/components/pay/model/gold_model.dart';
import 'package:pornhub_app/components/text_view.dart';
import 'package:pornhub_app/generate/app_image_path.dart';
import 'package:pornhub_app/routes/routes.dart';
import 'package:pornhub_app/utils/color.dart';
import 'package:pornhub_app/utils/extension.dart';
import 'package:pornhub_app/views/mine/recharge/recharge_page_controller.dart';

import '../../../utils/ad_jump.dart';

class RechargePage extends GetView<RechargePageController> {
  const RechargePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: COLOR.white,
      appBar: _buildAppBar(),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        child: Column(
          children: [
            Expanded(
              child: _buildContentView(context),
            ),
            _buildBuyView(),
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      backgroundColor: COLOR.white,
      leading: IconButton(
        iconSize: 20.w,
        icon: const Icon(
          Icons.arrow_back_ios,
          color: Colors.grey,
        ),
        onPressed: () => Get.back(),
      ),
      title: TextView(
        text: "金币充值",
        color: COLOR.color_333333,
        fontSize: 16.w,
        fontWeight: FontWeight.w600,
      ),
      actions: [
        Padding(
          padding: EdgeInsets.all(18.w),
          child: TextView(
            text: "明细",
            color: COLOR.color_666666,
            fontSize: 14.w,
            fontWeight: FontWeight.w600,
          ),
        ).onOpaqueTap(() => Get.toRechargeRecord(type: 3)),
      ],
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(1),
        child: Container(
          height: 1,
          color: COLOR.color_F0F0F0,
        ),
      ),
    );
  }

  ///
  Widget _buildContentView(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ///余额
          12.verticalSpace,
          _buildGoldBalanceView(),
          23.verticalSpace,
          TextView(
            text: '请选择充值金额',
            color: COLOR.color_333333,
            fontSize: 16.sp,
            fontWeight: FontWeight.w600,
          ),

          ///金币列表
          _buildGoldCardView(),
        ],
      ),
    );
  }

  ///余额
  _buildGoldBalanceView() {
    return AppBgView(
      height: 90.w,
      imagePath: AppImagePath.mine_recharge_balance_bg,
      fit: BoxFit.fill,
      child: Container(
        padding: EdgeInsets.only(left: 20.w),
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextView(
              text: "金币余额",
              color: COLOR.color_333333,
              fontSize: 14.w,
              fontWeight: FontWeight.w600,
            ),
            Obx(() => TextView(
                  text: '${(controller.userService.assets.gold ?? 0).toInt()}',
                  color: COLOR.color_333333,
                  fontSize: 25.w,
                  fontWeight: FontWeight.w600,
                )),
          ],
        ),
      ),
    );
  }

  ///金币列表
  Widget _buildGoldCardView() {
    return Obx(() => GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          padding: EdgeInsets.only(top: 16.w),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 10.w,
              crossAxisSpacing: 8.w,
              childAspectRatio: 112 / 85),
          itemCount: controller.goldVipList.length,
          itemBuilder: (BuildContext context, int index) {
            return Obx(() => GestureDetector(
                  onTap: () {
                    controller.vipGold.value = controller.goldVipList[index];
                  },
                  child: _buildGoldCardItemView(
                      controller.goldVipList[index],
                      controller.vipGold.value ==
                          controller.goldVipList[index]),
                ));
          },
        ));
  }

  _buildGoldCardItemView(GoldModel model, bool isChecked) {
    return Container(
      width: double.infinity,
      height: 85.w,
      decoration: BoxDecoration(
        color: COLOR.color_FFF1F2,
        borderRadius: BorderRadius.circular(6.w),
        border: Border.all(
            color: isChecked ? COLOR.color_F22F40 : COLOR.transparent,
            width: 1.w),
      ),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              TextView(
                text: '${model.goldNum}金币',
                color: COLOR.color_333333,
                fontSize: 14.w,
                fontWeight: FontWeight.w600,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              5.verticalSpace,
              TextView(
                text: '¥${model.price!.toInt()}元',
                color: COLOR.color_DD001B,
                fontSize: 14.w,
                fontWeight: FontWeight.w600,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
          if (model.freeGoldNum! > 0)
            Positioned(
              left: 0.w,
              top: 0.w,
              child: AppBgView(
                height: 18.w,
                imagePath: AppImagePath.mine_recharge_give_bg,
                padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 2.w),
                text: '赠送${model.freeGoldNum}金币',
                textColor: COLOR.white,
                textSize: 10.w,
                fontWeight: FontWeight.w600,
                textAlign: TextAlign.center,
              ),
            ),
        ],
      ),
    );
  }

  ///购买按钮
  _buildBuyView() {
    return GestureDetector(
      onTap: () => controller.onSubmitGold(),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20.w),
        color: COLOR.white,
        child: Column(
          children: [
            30.verticalSpace,
            Obx(() => AppBgView(
                  text:
                      "¥${(controller.vipGold.value.price ?? 0).toInt()} 立即购买",
                  height: 41.w,
                  radius: 22.w,
                  textSize: 16.w,
                  backgroundColor: COLOR.color_FABD95,
                  textColor: COLOR.color_14151D,
                )),
            15.verticalSpace,
            Text.rich(
              TextSpan(
                children: <InlineSpan>[
                  TextSpan(
                      text: '支付问题反馈，点击联系',
                      style: TextStyle(
                          color: COLOR.color_666666, fontSize: 12.sp)),
                  TextSpan(
                    text: '在线客服',
                    style:
                        TextStyle(color: COLOR.color_F52443, fontSize: 12.sp),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        kOnLineService();
                      },
                  ),
                ],
              ),
            ),
            21.verticalSpace,
          ],
        ),
      ),
    );
  }
}
